<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Quis Nostrud</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ui/effects.core.js"></script>
<script type="text/javascript">
$(document).ready(function() {
													 

$('<div id="monitorOverlay"></div>').appendTo($('#monitor'));
$('#sidebar h2 small').wrap('<a href="#"></a>');
$('#sidebar h2 a').click(function(evt) {
	$('#monitorResults').html('');
	evt.stopPropagation();
																	});

$('#mousemove small').wrap('<a href="#"></a>');
$('#mousemove a').toggle(function(evt) {
	$(document).unbind('mousemove');
	$('#mousemove small').text('enable');
	$(this).parent().addClass('disabled');
																	},
													function(evt) {
	$('#mousemove small').text('disable');
	$(this).parent().removeClass('disabled');
	$(document).bind('mousemove.text', function(evt) {																		 
		handle($('#'+evt.type),evt,this);
	});
																	});

var events=['click',
							'dblclick',
							'mouseover',
							'mouseout',
							'mousemove',
							'mousedown',
							'mouseup',
							'keyup',
							'keydown',
							'keypress',
							'focus',
							'blur'
							];

var winEvents=['load',
							'resize',
							'scroll',
							'unload'];



$('#button').click(function() {
	if ($(this).val()=='start') {
		$(this).val('stop');		
		bindEvents();
		$('#eventState').text('(active)');
	} else {
		$(this).val('start');		
		unBindEvents();
		$('#eventState').text('(disabled)');
	}
});
														
		
/*var unBindEvents = function() {
	for (var i=0;i<events.length; i++) {
	$(document).unbind(events[i]+'.test');
	$('*').unbind(events[i]+'.test');
	}
	for (var j=0;j<winEvents.length; j++) {
	$(window).unbind(winEvents[j]+'.test');
	}
}*/

var unBindEvents = function() {
	$(document).unbind('.test');
	$('*').unbind('.test');
	$(window).unbind('.test');
}

var bindEvents= function() {

$(window).unload(function() {
													alert('"bye bye!" says the unload event.');
													});

$('#prop, #noProp').bind('click.test',function(evt) {
	var idName = $(this).attr('id');
	$('#' + idName + 'Elems').text('1');
	$('#' + idName + 'Tags').text(this.tagName);
	handle($('#click'),evt,this);
	if (idName == 'noProp') evt.stopPropagation();
});

$('#prop, #noProp, #badge a, #button').bind('focus.test',function(evt) {
	handle($('#focus'),evt,this);
	evt.stopPropagation();
});

$('#prop, #noProp, #badge a, #button').bind('blur.test',function(evt) {
	handle($('#blur'),evt,this);
	evt.stopPropagation();
});

$('*:has(#prop)').bind('click.test',function(evt) {
		if ($(evt.target).attr('ID')!='prop') return;
		$('#propTags').append(", " + this.tagName);
		var currentClicks = parseInt($('#propElems').text());
		$('#propElems').text(currentClicks + 1);
		handle($('#click'),evt,this);
});


$('*:has(#noProp)').bind('click.test', function(evt) {
	if ($(evt.target).attr('ID')!='noProp') return;
	$('#noPropTags').append(", " + this.tagName);
		var currentClicks = parseInt($('#noPropElems').text());
		$('#noPropElems').text(currentClicks + 1);
		handle($('#click'),evt,this);
});


for (i=0;i<events.length;i++) {
$(document).bind(events[i]+'.test',function(evt) {
	handle($('#'+evt.type),evt,this);
});
}


for (var j=0;j<winEvents.length;j++) {
$(window).bind(winEvents[j]+'.test',function(evt) {
	handle($('#'+evt.type),evt,this);
});
}

$(document).bind('keydown.test',function(evt) {
				updateKey('#keydown',evt);
});
$(document).bind('keyup.test',function(evt) {
				updateKey('#keyup',evt);
});
$(document).bind('keypress.test',function(evt) {
				updateKey('#keypress',evt);
});

};

bindEvents();
			
function handle(elem,evt,targElem) {
		highlight(elem);
		updateMonitor(evt);
		updateMouse(evt);
}
	
function highlight(elem) {
	if (elem.is(':animated')) return;
	elem.animate({ backgroundColor: "red" },250).animate({ backgroundColor: "transparent" }, 1000);
}

function updateMonitor(evt) {
	var results = $('#monitorResults');
	var currHTML = results.html();
	currHTML = currHTML.length > 1200 ? currHTML.slice(0,1200) : currHTML;
	var eventMessage = '<p class="event">' + evt.type + '</p>';
	var target = evt.target.tagName ? evt.target.tagName : '';
	var targetMessage = '<p class="target">' + target + '</p>';
	results.html(eventMessage+targetMessage+currHTML );
}

function updateMouse(evt) {
	$('#x').text(evt.pageX);
	$('#y').text(evt.pageY);
}

function updateKey(elem, evt) {
	$('.which',elem).text(evt.which);
	$('.shiftkey',elem).text(evt.shiftKey);
	$('.metakey',elem).text(evt.metaKey);
	$('.keycode',elem).text(evt.keyCode);
	$('.altkey',elem).text(evt.altKey);
	$('.ctrlkey',elem).text(evt.ctrlKey);
	var key = (evt.type=='keypress') ? evt.which : evt.keyCode;
	var letter = String.fromCharCode(key);
	$('.letter',elem).text(letter);
}
	
});
</script>
<style type="text/css">
<!--
.disabled {
	color: #CCC;
	font-weight: normal;
}
#sidebar h2 a {
	color:white;
	display: inline;
	font-size: 75%;
	font-weight:normal;
}
.data {
font-weight:bold;
color:red;
	
}
#eventState {
	font-size: 50%;
}

#target {
	float: right;
	width: 125px;
	padding: 0px 10px 10px;
	background: #E6E2AE;
	border: 1px solid #333;
}
#monitor {
	height: 300px;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	position: relative;
	font-size: 1.2em;
}

#monitorOverlay {
	background: url(../images/monitor_overlay.png) no-repeat;
	position: absolute;
	left: 0;
	top: -3px;
	width: 150px;
	height: 330px;
}

#sidebar .event {
	float: left;
	width: 65%;
	clear: left;
}

#monitorResults {
	margin-top:5px;
}
#keydown, #keyup, #keypress {
	float: left;
	width: 30%;
	padding-right: 5px;
	margin-bottom: 10px;
}
#keydown, #keyup {
	margin-right: 5px;
}
#keydown p, #keyup p, #keypress p {
	margin-bottom: 3px;
}
#keyup ul, #keydown ul, #keypress ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}


#keyup span, #keydown span, #keypress span {
	float: right;
	width: 40%;
}

-->
</style>
</head>
<body id="threeCol">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
  <h1>Events <span id="eventState">(active)</span>&nbsp;&nbsp;
<input type="button" name="button" id="button" value="stop">
</h1>
<h2>Page Events</h2>
  <ul class="sideBySide clear">
    <li id="load">load</li>
    <li  id="resize">resize</li>
    <li  id="scroll">scroll</li>
    <li  id="unload">unload</li>
    </ul>
  <h2>Click Events</h2>
  <ul class="sideBySide clear">
    <li id="click">onclick</li>
    <li  id="dblclick">ondoubleclick</li>
        <li  id="mousedown">mousedown</li>
    <li  id="mouseup">mouseup</li>
    </ul>
  <h2>Mouse Events &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<small>X:<span id="x" class="data"></span>&nbsp;&nbsp;&nbsp;Y:<span id="y" class="data"></span></small></h2>
   <ul class="sideBySide clear">
    <li id="mouseover">mouseover</li>
    <li id="mouseout">mouseout</li>
     <li id="mousemove">mousemove&nbsp;&nbsp;<small>disable</small></li>
    </ul>
    <h2>Key Events</h2>
   
    <div  id="keydown" class="clear"><p>keydown</p>
        		<ul>
        		  <li><span class="letter data">&nbsp;</span>Key</li>
        		  <li><span class="keycode data">&nbsp;</span>keyCode</li>
        		  <li><span class="which data">&nbsp;</span>which</li>
        		  <li><span class="altkey data">&nbsp;</span>altKey</li>
        		  <li><span class="ctrlkey data">&nbsp;</span>ctrlKey</li>
        		  <li><span class="metakey data">&nbsp;</span>metaKey</li>
        		  <li><span class="shiftkey data">&nbsp;</span>shiftKey</li>
      		  </ul>
    </div>
    <div  id="keyup" class="clear"><p>keyup</p>
        		<ul>
        		  <li><span class="letter data">&nbsp;</span>Key</li>
        		  <li><span class="keycode data">&nbsp;</span>keyCode</li>
        		  <li><span class="which data">&nbsp;</span>which</li>
        		  <li><span class="altkey data">&nbsp;</span>altKey</li>
        		  <li><span class="ctrlkey data">&nbsp;</span>ctrlKey</li>
        		  <li><span class="metakey data">&nbsp;</span>metaKey</li>
        		  <li><span class="shiftkey data">&nbsp;</span>shiftKey</li>
      		  </ul>
    </div>
    <div id="keypress" class="clear"><p>keypress</p>
    		<ul>
        		  <li><span class="letter data">&nbsp;</span>Key</li>
        		  <li><span class="keycode data">&nbsp;</span>keyCode</li>
        		  <li><span class="which data">&nbsp;</span>which</li>
        		  <li><span class="altkey data">&nbsp;</span>altKey</li>
        		  <li><span class="ctrlkey data">&nbsp;</span>ctrlKey</li>
        		  <li><span class="metakey data">&nbsp;</span>metaKey</li>
        		  <li><span class="shiftkey data">&nbsp;</span>shiftKey</li>
   		  </ul>
    </div>
    <h2 style="margin-top:100px;">Blur/Focus (tab to links or form elements)</h2>
     <ul class="sideBySide clear">
    <li id="focus">focus</li>
    <li  id="blur">blur</li>
    </ul>
</div>
  
  <div id="sidebar">
    <h2>Event Monitor <small>(clear)</small></h2>
    <div id="monitor">
    <p class="event"><strong>Event</strong></p>
    <p class="target"><strong>Target</strong></p>
    <div id="monitorResults"></div>
    </div>
</div>
  </div>
 
  <div id="news">
    <h2>Event Tests</h2>
    
  <h3>Propagation </h3>
  <p><a href="#" id="prop">Click Me</a></p>
  <p>Click events: <span id="propElems">0</span></p>
  <p>Tags responding: <br><strong><span id="propTags"></span></strong></p>

  <h3>No Propagation</h3>
  <p><a href="#" id="noProp">Click Me</a></p>
    <p>Click events: <span id="noPropElems">0</span></p>
      <p>Tags responding: <strong><span id="noPropTags"></span></strong></p>
</div>
  
<div id="footer"><em>&#8220;Building Interactive Web Sites with JavaScript&#8221;</em></div>
</div>
</body>
</html>
